<template>
  <div class="top-bar"   :style="{ backgroundColor: color }">
    <div class="tab">
      <div
        v-for="(item, index) in homeTitleTab"
        :key="index"
        :class="{activess: index == activeIndex}"
        @click="goheader(index) "
        class="tab-item"
      >
        <div style="position: relative;">
            <div>{{ item.name }}</div>
         <div v-if="index == activeIndex" class="xuanzhongdian"></div>
        </div>
     
      </div>
    </div>
    <div class="icon-box">
        <img class="iconBoxImg" src="~/static/header/basic icon@2x.png" alt="" @click="gosousuo(2)">
        <!-- <img class="iconBoxImg" src="~/static/header/basic icon@2x (1).png" alt="" style="margin:0 .5rem"> -->
         <img class="iconBoxImg" style="margin:0 .3125rem;" src="~/static/header/basic icon@2x (2).png" alt="" @click="goxiaoxi">
    </div>
  </div>

</template>

<script>
export default {
    props: {
    types: {
      type: Number,
     default: 0 
    },
      color: {
      type: String,
    },
  },
  mounted() {
    this.activeIndex = this.types
    this.fsioa()
  },
  data() {
    return {
      homeTitleTab: [],
      activeIndex: 0 // 追踪当前选中的 tab
    };
  },
  methods: {
    goxiaoxi(){
        window.location.href = `${this.$domain}/?ct=wap&ac=messages`;
    },
    async fsioa(){
             const params = {
        ct: 'app2023',
        ac: 'index_config'
      };
      const response = await this. $axios.get('api/app/v3', { params });
      this.homeTitleTab = response.data.data.index_top
    },
    gosousuo(){
               window.location.href = `${this.$domain}/m/index/search.php`;
    },
    goheader(index){
           this. activeIndex = index
           switch (index) {
        case 0:
          this.$nuxt.$router.push('/');
          break;
        case 1:
          this.$nuxt.$router.push('/allgameph.html');
          break;
        case 2:
              this.$nuxt.$router.push('/indexsearch.html');
        // window.location.href = `${this.$domain}/m/zhaoyouxi/`;
          break;
           case 3:
          this.$nuxt.$router.push('/home/zhuti');
          break;
        default:
          this.$nuxt.$router.push('/404'); // 默认路由，处理未定义的情况
          break;
      }
    }
  }
};
</script>
<style >
body {
  font-size: 16px; /* 默认字体大小 */
}

/* 小屏幕设备 */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* 小屏幕设备的字体大小 */
  }
}

/* 中屏幕设备 */
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    font-size: 16px; /* 中屏幕设备的字体大小 */
  }
}

/* 大屏幕设备 */
@media (min-width: 1201px) {
  body {
    font-size: 18px; /* 大屏幕设备的字体大小 */
  }
}
</style>
<style scoped>

.top-bar {
  padding: 0 .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
   position: sticky;
    top: 0;
  background: #F7F8FA;
  z-index: 9999;
  margin-bottom: 10px;
}

.top-bar .tab {
  display: flex;
  align-items: center;
  font-size: .9375rem;
  width: 80%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; 
  height: 2.3125rem;
  cursor: pointer;
    z-index: 9999;
}

.top-bar .tab::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}

.tab-item {
  display: inline-block; 
  margin-right: 1.25rem;
  text-align: center;
    z-index: 9999;
}

.xuanzhongdian {
  width: .375rem;
  height: .375rem;
  margin: 0 auto;
  background: #ff7500;
  box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
  border-radius: 50%;
  position: absolute;
  left: 46%;
  bottom: -20%;
}

.activess {
  font-weight: bold;
  font-size: 1.0625rem;
}

.icon-box {
  display: flex;
  align-items: center;
  flex: 1;
}

.iconBoxImg {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
}
</style>